<template>
	<el-drawer
		v-model="drawer"
		:title="title"
		:with-header="false"
		:close-on-click-modal="false"
		:size="size"
	>
		<div class="common-layout">
			<el-container>
				<el-header>{{ title }}</el-header>
				<el-main>
					<slot></slot>
				</el-main>
				<el-footer>
					<el-button v-show="showBtn" @click="onSubmit" type="primary"
						>提交</el-button
					>
					<el-button @click="closeDrawer" type="primary">关闭</el-button>
				</el-footer>
			</el-container>
		</div>
	</el-drawer>
</template>

<script setup>
import { ref } from "vue";

// 定义响应式数据
const drawer = ref(false);
// 接收属性
const props = defineProps({
	title: {
		type: String,
		default: "",
	},
	size: {
		type: String,
		default: "45%",
	},
	showBtn: {
		type: Boolean,
		default: true,
	},
});
// 接收函数方法
const emits = defineEmits(["goDrawer"]);
// 定义打开或关闭抽屉的函数
function closeDrawer() {
	drawer.value = false;
}
function openDrawer() {
	drawer.value = true;
}
function onSubmit() {
	emits("goDrawer");
}

// 向外暴露方法
defineExpose({
	openDrawer,
});
</script>

<style lang="less" scoped>
.el-main {
	height: 80vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.el-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.el-form-item__content {
	margin-left: 0 !important;
}
</style>
